<!DOCTYPE html>
<html>
<head>
    {{ template "inc/select2" . }}
    <link rel="stylesheet" type="text/css" href="/css/strategy.css">
</head>
<body>
    {{ template "inc/nav" . }}

<div class='container middle_vertical' style='margin-top:100px'>
  <div class='col-md-3'>
  </div>
  <div class='col-md-6'>
    <div role='form' class='form-horizontal'>
      <div class='form-group'>
        <label class='control-label' for='TargetNeedToMonitor'>URL(必填)</label>
        <div class="input-group">
          <textarea type="text" class="form-control target" id="url" placeholder="http://blog.x2know.org 支持批量，每行一个"/></textarea>
        </div>
      </div>
      <div class='form-group'>
        <label for='TargetNeedToMonitor'>期望返回状态码</label>
        <div class='controls'>
          <input class='form-control' type='text' placeholder='默认为 200' id='expect_code'/>
        </div>
      </div>
          <div class='form-group'>
              <label for='TargetNeedToMonitor'>Timeout (毫秒)</label>
              <input class='form-control' type='timeout' placeholder='单位：毫秒，默认 3000ms' id='timeout'></input>
          </div>

           <div class='form-group'>
            <label for='TargetNeedToMonitor'>备注(选填)</label>
            <div class='controls'>
              <input class='form-control' type='text' placeholder='备注信息' id='note'></input>
            </div>
          </div>

          <div class='form-group' style="">
            <label for='TargetNeedToMonitor'>告警设置</label>
            <table>
            <thead>
            <tr>
              <th><div style="width:50px;">连续</div></th>
              <th><input class='form-control' type="text" style="width:40px;margin-right:10px" value="3"  id='times'></th>
              <th><div style="width:105px;">次异常,&nbsp;&nbsp;发送到</div></th>
              <th><input class='form-control' type="text" style="width:150px;margin-right:10px" id='teams'></th>
              <th><div style="width:80px;">发送次数</div></th>
              <th><input class='form-control' type="text" style="width:100px" id='max_step'></th>
            </tr>
          </thead>
        </table>
          </div>
          <div class="form-group">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">高级选项</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class='form-group'>
            <label for='TargetNeedToMonitor'>关键字(选填)</label>
            <div class='controls'>
              <input class='form-control' type='text' placeholder='用于检索是否异常' id='keywords'></input>
            </div>
          </div>
          
          <div class='form-group'>
          <label for='TargetNeedToMonitor'>Cookie</label>
            <input class='form-control' type='text' placeholder='监控要登录状态访问的url时填写' id='data'></input>
          </div>

          <div class='form-group'>
          <label for='TargetNeedToMonitor'>IP</label>
            <input class='form-control' type='text' placeholder='指定域名对应的ip,多个用逗号隔开' id='ip'></input>
          </div>

          <div class='form-group'>
            <label for='TargetNeedToMonitor'>tags</label>
            <textarea type="text" class="form-control " id="tags" value="" placeholder="向falcon推送数据时使用, 形式为 a=b 每行一个"/></textarea>
          </div>

        </div>
          <div class='container' style="margin-top:10px">
            <button class='btn btn-defaultr btn-lg btn-primary' id='submit' onclick='add_strategy()'>提交</button>
          </div>
        </div>
        <!-- end of the form -->
      </div>
      <!-- end of the col-md-8 -->
    </div>
  </div>

<script type="text/javascript">
$(function() {
    $("#teams").select2({
        placeholder: "报警接收组",
        allowClear: true,
        multiple: true,
        quietMillis: 100,
        minimumInputLength: 1,
        id: function(obj){return obj.id;},
        ajax: {
            url: "/teams/query",
            dataType: 'json',
            data: function(term, page) {
                return {
                    query: term,
                    limit: 20
                };
            },
            results: function(json, page) {
                return {results: json.data.teams};
            }
        },
        formatResult: function(obj) {return obj.name},
        formatSelection: function(obj) {return obj.name},
    });

});
</script>
</body>
</html>


    